<template>
  <div class="main-content item-box" >
    <div class="item-left">
      <div class="sharetype-list-box box-bg">
        <div class="pane-title layui-row row-align">
          <img src="/blog/imgs/icon/lingxing.png">
          <span>推荐文章</span>
        </div>
        <GeminiScrollbar run v-if="this.isIe==false"    style="height: 200px"  >
          <ul class="content">
            <li class="list-item layui-row layui-elip" v-for="item in recommendEssay" :key="item.id"><a @click="eyeEssay(item.id)">{{item.name}}</a></li>
          </ul>
        </GeminiScrollbar>


        <div v-if="this.isIe==true" style="height: 200px;overflow-y: auto">
          <ul class="content">
            <li class="list-item layui-row layui-elip" v-for="item in recommendEssay" :key="item.id"><a href="#">{{item.essayName}}</a></li>
          </ul>
        </div>
      </div>
      <div class="sharetype-list-box box-bg">
        <div class="pane-title layui-row row-align">
          <img src="/blog/imgs/icon/lingxing.png">
          <span>标签</span>
        </div>
        <ul>
          <div class="layui-badge " style="padding: 5px;margin-top: 15px;margin-left: 5px;cursor: pointer" v-for="item in essayLabel" :key="item.id">
            {{item.label}}</div>
        </ul>
      </div>
    </div>
    <div class="item-middle">
      <div class="one-sharetype-box layui-row box-bg">
        <div class="layui-col-md5">
          <div class="item-img-box">
            <img :src="topEssay.pictureUrl"/>
          </div>
        </div>
        <div class="oneshare-content layui-col-md7">
          <h3 class="font-bold2 font-size3 font-color4 layui-elip">{{topEssay.title}}</h3>
          <div class="oneshare-msg-row layui-row font-color3 font-size1">
            <p >{{topEssay.text}}</p>
          </div>
          <div class="look-more layui-row">
            <a href="#" class="layui-btn layui-btn-sm pane-radius subject-color">查看更多</a>
            <a href="#" class="layui-btn layui-btn-sm pane-radius">免费获取</a>
          </div>
        </div>
      </div>
      <div class="type-module layui-row layui-col-space20">
        <div class="layui-col-md6" v-for="item in essayGroup" :key="item.id">
          <div class="type-module-item layui-row">
            <div class="item-title-row layui-row row-align">
              <div class="layui-col-md10 row-align font-size2">
                <div class="left-icon"></div>
                <span class="font-bold">{{item.artitleGroupName}}</span>
              </div>
              <div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
                <a href="#">更多</a>
              </div>
            </div>
            <div class="item-ul-row layui-row">
              <ul>
                <li v-for="(essay,index) in item.artitle.slice(0,4) " :key="essay.essayId" v-if="index <= 4">
                  <div class="ul-li-div layui-row row-align">
                    <div class="layui-col-md9 layui-elip font-size2" ><i class="layui-icon layui-icon-file"></i> &nbsp;<a style="cursor: pointer"  @click="eyeEssay(essay.id)">{{essay.name}}</a></div>
                    <div class="layui-col-md3 text-align-right font-size1 font-color3">{{essay.updateTime.substr(0,10)}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="zonhe-row layui-row">
        <div class="item-title-row layui-row row-align">
          <div class="layui-col-md10 row-align font-size2">
            <div class="left-icon"></div>
            <span class="font-bold">综合文章</span>
          </div>
        </div>
        <div class="zonhe-ul-row layui-row">
          <ul>
            <li>
              <div class="article-list-row layui-row" style="border-bottom-color: #8b98ab;border-bottom: 1px;border-bottom-style: dashed">
                <div class="article-li-title layui-row">
                  <h3 class="font-bold layui-elip"><a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></h3>
                </div>
                <div class="article-li-msg"><p>Windows 10将会让搜索和使用信息更加简单，包括本地、网络和互联网搜索功能,直观的用户体验将更 加高级,还会整合自动化应用程序提交和交叉程序数据透明性。 Windows 10 操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之方案和用户账户管理,在数据保护和坚固协作的固有冲间</p></div>
                <div class="article-li-param layui-row">
                  2019-01-17 11:05<span>阅读数：529</span><span>评论数：11</span>
                </div>
              </div>
            </li>
            <li>
              <div class="article-list-row layui-row">
                <div class="article-li-title layui-row">
                  <h3 class="font-bold layui-elip"><a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></h3>
                </div>
                <div class="article-li-msg"><p>Windows 10将会让搜索和使用信息更加简单，包括本地、网络和互联网搜索功能,直观的用户体验将更 加高级,还会整合自动化应用程序提交和交叉程序数据透明性。 Windows 10 操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之方案和用户账户管理,在数据保护和坚固协作的固有冲间</p></div>
                <div class="article-li-param layui-row">
                  2019-01-17 11:05<span>阅读数：529</span><span>评论数：11</span>
                </div>
              </div>
            </li>
          </ul>
          <div class="look-more layui-row subject-second-color font-color1 text-align-center pane-radius"><a href="#">查看更多</a></div>
        </div>
      </div>
      <div class="youqing-url layui-row">
        <div class="item-title-row layui-row row-align">
          <div class="layui-col-md10 row-align font-size2">
            <div class="left-icon"></div>
            <span class="font-bold">友情链接</span>
          </div>
          <div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
            <a href="#">交换链接+</a>
          </div>
        </div>
        <div class="url-box layui-row">
          <a href="http://www.jufanshare.com" target="_blank">聚繁</a>
          <a href="http://ibeetl.com" target="_blank">beetl</a>
          <a href="https://www.layui.com/" target="_blank">layui</a>
        </div>
      </div>

    </div>
    <div class="item-right">
      <div class="right-one-row layui-row pane-bg-radius">
        <div class="visit-img-box top-radius">
          <img src="/blog/imgs/canreplace/headimgbg.jpg" class="top-radius"/>
        </div>
        <div class="headimg-box">
          <img src="/blog/imgs/timg.jpg"/>
        </div>
        <div class="nickname layui-row row-align text-align-center">
          {{blogUserInfo.name}}
          <span><img src="/blog/imgs/icon/man.png" height="32"width="32"/></span>
        </div>
        <div class="padding-hr layui-row common-padding-x">
          <div class="hr-line-div"></div>
        </div>
        <div class="mine-msg layui-row common-padding font-size1 font-color5">
          <div class="layui-row row-align">
            <div class="msg-name layui-col-md3">Q Q ：</div>
            <div class="msg-val layui-col-md9">{{blogUserInfo.qq}}</div>
          </div>
          <div class="layui-row row-align">
            <div class="msg-name layui-col-md3">职业 ：</div>
            <div class="msg-val layui-col-md9">{{blogUserInfo.professional}}</div>
          </div>
          <div class="layui-row row-align">
            <div class="msg-name layui-col-md3">手机 ：</div>
            <div class="msg-val layui-col-md9">{{blogUserInfo.phone}}</div>
          </div>
          <div class="layui-row row-align">
            <div class="msg-name layui-col-md3">现居 ：</div>
            <div class="msg-val layui-col-md9">{{blogUserInfo.nowIn}}</div>
          </div>
          <div class="layui-row row-align">
            <div class="msg-name layui-col-md3">Email ：</div>
            <div class="msg-val layui-col-md9">{{blogUserInfo.email}}</div>
          </div>
          <div class="layui-row row-align">
            <div class="msg-name layui-col-md3">爱好 ：</div>
            <div class="msg-val layui-col-md9">鲁代码</div>
          </div>
        </div>
        <div class="row-hr layui-row">
          <div class="row-hr-line-div"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
    export default {
        name: "context",
      methods:{
        eyeEssay(id){
          let newpage = this.$router.resolve({
            name: 'blogEssayInfo',
            path:'/home/blogEssayInfo',
            query:{
              id:id,

            }
          })

          window.open(newpage.href,'_blank');
        },
          getEssayGroup(){
            let  that=this;
            this.$axios({
              method: 'get',
              url: '/blog/getEssayGroup',
            })
              .then(function(res) {
                that.essayGroup=res.data.data;

              });
          },
        getIsRecommend(){
          let  that=this;
          this.$axios({
            method: 'get',
            url: '/blog/getIsRecommend',
          })
            .then(function(res) {
              that.recommendEssay=res.data.data;

            });
        },
        getEssayLabel(){
          let  that=this;
          this.$axios({
            method: 'get',
            url: '/blog/essayLabel',
          })
            .then(function(res) {
              that.essayLabel=res.data.data;

            });
        },
      },
      mounted() {

      },
      created() {

       this.getEssayGroup();
       this.getEssayLabel();
       this.getIsRecommend();
      },
      data(){
          return{

            essayGroup:[{
               id:'1',
               artitleGroupName:'java基础',
               num:10,
               artitle:[
                 {essayId:1,title:'hashmap源码解析'},
                 {essayId:2,title:'java代理模式'},
                 {essayId:3,title:'java基础知识'},
                 {essayId:4,title:'java锁源码分析'},
               ]
            }
            ],
            topEssay:{
               id:'1',
               title:'程序员的人生感悟',
               text:'Windows 10将会让搜索和使用信息更加简单，包括本地、网络和互联网搜索功能,直观的用户体验将更加高级,还会整合自动化应用程序提交和交叉程序数据透明性。\n' +
                 '              Windows 10操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之间搭建沟通桥梁,同时也会开启企业级的数据保护和权限许可。\n' +
                 '              Windows 10大幅缩减了Windows 的启动速度，系统加载时间一般不超过20秒,开机速度相比Windows 其他的操作系统提升了28%，更加安全可靠！',
               pictureUrl:'/blog/imgs/timg.jpg'
            },
            essayLabel:[
              {id:'1',label:'java基础'},

            ],
            blogUserInfo:{
              name:'花花世界',
              qq:'1154474377',
              professional:'程序员',
              nowIn:'陕西西安',
              email:'1154474377@qq.com',
              phone:'15809216501'
            },
            recommendEssay:[
              {
                essayId:'1',
                essayName:'hashMap源码分析'
              },
              {
                essayId:'2',
                essayName:'java代理模式'
              },
              {
                essayId:'3',
                essayName:'递归算法'
              },
              {
                essayId:'3',
                essayName:'递归算法'
              },
              {
                essayId:'3',
                essayName:'递归算法'
              },
              {
                essayId:'3',
                essayName:'递归算法'
              },  {
                essayId:'3',
                essayName:'递归算法'
              }
            ]
          }
      },
    }
</script>
<style>

  .my-scroll-bar{
    height:150px;

  }
  .gm-scrollbar.-vertical {
    width: 6px;
    top: 2px;
    background-color:antiquewhite;
  }

  /*.gm-scrollbar.-horizontal {
    background-color:#a94442;
    overflow-x:hidden
  }*/
  .gm-scrollbar .thumb {
    background-color:#bbbbbb;
  }
  .gm-scrollbar .thumb:hover {
    background-color: green;
  }

</style>
